چیزهای جدید در وب

Rachel Andrew

تاریخ انتشار: 20 می 2025

در Google I/O 2025، سخنرانی کلیدی What's new in web، همه اعلان‌های Baseline را به اشتراک گذاشت، همراه با نگاهی به برخی از ویژگی‌هایی که امسال بخشی از Baseline شده‌اند. سال شگفت انگیزی برای وب بود، و برای Baseline، این پست خلاصه ای از همه چیزهایی است که ذکر شد، با تمام پیوندها برای کسب اطلاعات بیشتر.

داشبورد پلتفرم وب و ویژگی های وب

در سال 2024 راه‌اندازی اولیه داشبورد پلتفرم وب را اعلام کردیم که از مجموعه داده‌های ویژگی‌های وب استفاده می‌کند و به شما امکان می‌دهد تمام ویژگی‌هایی را که بخشی از Baseline هستند کاوش کنید.

داده‌های ویژگی‌های وب اکنون کامل شده‌اند و همه ویژگی‌های پلتفرم نقشه‌برداری شده‌اند. با پیوستن ویژگی های جدید به Baseline هر ماه، داده ها به روز می شوند و همه اینها در داشبورد نمایش داده می شود.

ابزارهایی برای کمک به شما در کشف هدف پایه خود

در حالی که ممکن است خط مشی پشتیبانی مرورگر خود را بر اساس هدف متحرک Baseline در دسترس قرار دهید - مانند آژانس بریتانیایی Clearleft - همچنین می توانید یک هدف ثابت بر اساس یک سال پایه اتخاذ کنید. اکنون می‌توانید از داده‌های کاربر خود، همراه با داده‌های ویژگی‌های وب برای ایجاد بهترین هدف برای خود استفاده کنید.

سال گذشته در I/O اعلام کردیم که RUMvision Baseline را در محصول خود پیاده‌سازی می‌کند و این یکپارچه‌سازی اکنون فعال است.

از آنجایی که از داده‌های RUM شما استفاده می‌کند، به شما کمک می‌کند تشخیص دهید که کدام سال پایه را براساس آن داده‌ها به جای میانگین جهانی انتخاب کنید. همچنین می تواند به شما کمک کند تا ببینید آیا Baseline Widely در دسترس بودن برای شما منطقی است یا خیر.

همچنین می‌توانید از داده‌های Google Analytics خود استفاده کنید تا به وضوح ببینید چند درصد از کاربران شما از هر هدف پایه با جستجوگر جدید Google Analytics Baseline پشتیبانی می‌کنند.

اینها فقط دو مورد از مجموعه رو به رشد ابزارهایی هستند که به شما کمک می کنند داده های کاربر واقعی خود را به Baseline ترسیم کنید.

گروه Web DX Community اخیراً افزونه‌ای را برای Netlify راه‌اندازی کرده است که پشتیبانی از سال‌های پایه مختلف را نشان می‌دهد و به‌طور گسترده در سایت‌های شما در دسترس است تا به شما کمک کند تصمیم بگیرید چه چیزی را در ابزارهای ساخت خود هدف قرار دهید. به زودی ادغام با محصول Cloudflare's Observatory RUM و Contentsquare ارائه می شود.

داده ها را با ابزارهای خود یکپارچه کنید

داده های ویژگی های وب برای ادغام های خود شما باز و در دسترس هستند. ما در تلاشیم تا انجام این کار را آسان‌تر کنیم.

از API داشبورد پلتفرم وب استفاده کنید یا داده‌های ویژگی‌های وب را مستقیماً از بسته npm مصرف کنید.

اکنون می‌توانید نسخه‌های مرورگر را با استفاده از ماژول نگاشت پایه مرورگر از گروه جامعه W3C WebDX به یک هدف پایه نگاشت کنید. این ماژول را می توان در محیط جاوا اسکریپت سمت سرور یا با دانلود فایل های JSON یا CSV که به صورت روزانه از مخزن به روز می شوند استفاده کرد.

این داده ها شامل نگاشت نه تنها برای مجموعه مرورگر اصلی Baseline، بلکه برای مرورگرهای پایین دستی مانند Samsung Internet، Opera، UC Browser و Android Webview است.

بدانید که آیا ویژگی ها توسط هدف پایه شما پشتیبانی می شوند یا خیر

اطلاعات پایه اکنون در اکثر صفحات MDN و Can I Use وجود دارد، همچنین می توان آن را در داشبورد پلتفرم وب و مقالات در web.dev و ترفندهای CSS یافت. با این حال، همه اینها به شما نیاز دارد که به دنبال پشتیبانی باشید. بسیار مفیدتر است که هنگام کدنویسی، و به عنوان بخشی از سایر ابزارهایی که استفاده می کنید، اطلاعات پایه در IDE شما نشان داده شود.

ما مشتاقیم که با شما به اشتراک بگذاریم که بسیاری از ابزارهای کلیدی اکنون دارای پشتیبانی Baseline هستند یا به راحتی یکپارچه می شوند.

browserslist-config-baseline

بسیاری از ابزارها مانند Babel و PostCSS از فهرست مرورگرها برای تعیین اینکه کدام مرورگرها را پشتیبانی می کنند، استفاده می کنند.

به همراه WebDX CG و اعضای انجمن، تیم Chrome به انتشار ابزار جدیدی به نام browserslist-config-baseline کمک کرد. این به شما امکان می‌دهد اهداف فهرست مرورگرهای خود را در شرایط پایه مانند سال‌های در دسترس یا پایه پیکربندی کنید.

با این کار، هر ابزاری که یک هدف فهرست مرورگرها را می گیرد، اکنون می تواند بر حسب Baseline بیان شود.

در Use Baseline with browserslist بیشتر بیاموزید.

خط پایه بر حسب لینتر-ESLint و Stylelint

استفاده از Baseline با linter اخیراً با چند ابزار جدید در فضای linter امکان پذیر شده است که با ESLint برای CSS شروع می شود.

Baseline ESLint یک قانون use-baseline دارد. می‌توانید این را روی هدف اصلی ترجیحی خود تنظیم کنید، و هنگام استفاده از ویژگی‌هایی که جدیدتر از هدف شما هستند به شما هشدار می‌دهد. شما می‌توانید نحوه رفع این هشدارها را انتخاب کنید: یا با جایگزین کردن آن ویژگی با موارد اولیه یا با سرکوب هشدار لنگر، که زمانی که می‌دانید از یک ویژگی پیشرفته به‌طور ایمن استفاده می‌کنید، به عنوان مثال اگر یک پیشرفت پیشرونده باشد، راه‌حلی کاملا معتبر است.

به‌طور پیش‌فرض، ESLint در صورت استفاده از ویژگی‌های جدیدتر در بلوک‌های @supports هشدار نمی‌دهد، زیرا مرورگرهای پشتیبانی‌نشده به هر حال آن‌ها را ارزیابی نمی‌کنند.

برای نیازهای شما در زمینه HTML، یک افزونه انجمن به نام html-eslint نیز وجود دارد.

Stylelint رسما از افزونه ای به نام stylelint-plugin-use-baseline پشتیبانی می کند. این قانون دقیقاً مانند قانون ESLint برای CSS عمل می کند، اما به جای آن بر روی Stylelint اجرا می شود.

بسیاری از لینترها دارای پلاگین های IDE نیز هستند، بنابراین می توانید در حین کدنویسی از طریق زیرخط های نازک، بازخورد فوری درباره وضعیت Baseline دریافت کنید.

پایه در VS Code و JetBrains WebStorm

بسیاری از IDE ها مدت هاست که از روشی برای نگه داشتن ماوس روی یک ویژگی در ویرایشگر شما و دیدن لیست نسخه های مرورگر پشتیبانی شده پشتیبانی می کنند.

اما فهمیدن اینکه آیا استفاده از این ویژگی واقعاً ایمن است یا نه، بسیار سخت است - باید به طور ذهنی تجزیه و تحلیل کنید که آیا مرورگرهای اصلی در آن لیست وجود ندارد و آن نسخه مرورگر چقدر جدید است.

برای رفع این مشکل، ما با محبوب‌ترین IDE مورد استفاده توسط میلیون‌ها توسعه‌دهنده وب، VS Code، شریک شده‌ایم تا داده‌های Baseline را مستقیماً در این کارت‌های شناور ادغام کنیم.

اکنون می‌توانید ماوس را روی یک ویژگی نگه دارید و فقط به شما می‌گوید که آیا این ویژگی به عنوان Baseline در نظر گرفته می‌شود و برای چه مدت، یا اینکه آیا مرورگرهای اصلی وجود دارند که هنوز آن را به طور کامل اجرا نکرده‌اند.

ویژگی های پشتیبانی شده شامل ویژگی های CSS، عناصر HTML و ویژگی های HTML است. در Visual Studio Code اکنون از Baseline پشتیبانی می کند .

این ادغام به این معنی است که هر IDE مبتنی بر VS Code نیز از این هاورکارت ها بهره خواهد برد.

و، ما همچنین می توانیم اعلام کنیم که JetBrains در حال پیاده سازی هاورکارت ها در WebStorm JavaScript و TypeScript IDE خود است.

وب سریعتر از همیشه در حال بهبود است

ما امیدواریم که Baseline به شما کمک کند تا از این واقعیت استفاده کنید که وب قابل همکاری سریعتر از همیشه در حال بهبود است.

می‌توانید از داشبورد پلتفرم وب استفاده کنید تا همه ویژگی‌هایی را که در دوازده ماه گذشته به‌تازگی در دسترس قرار گرفته‌اند، یعنی از Google I/O 2024، استفاده کنید.

همچنین تعدادی از ویژگی‌ها وجود دارد که می‌توانید اطمینان داشته باشید که به‌زودی در پروژه Interop 2025 در دسترس خواهند بود. می‌توانید در مورد تمام ویژگی‌های گنجانده شده در Interop2025 بخوانید: یک سال دیگر از بهبود پلتفرم وب .

حالت های نوشتن جانبی

ما قبلاً دیده‌ایم که یک ویژگی به تازگی در دسترس است، مقادیر sideways-rl و sideways-lr برای ویژگی writing-mode CSS. اگر از حالت نوشتن عمودی صرفاً برای اهداف طرح‌بندی استفاده می‌کنید، احتمالاً مقادیر جانبی آن‌هایی هستند که باید به آن‌ها دسترسی پیدا کنید.

h1 {
  writing-mode: sideways-rl;
}

h2 {
  writing-mode: sideways-lr;
}

موقعیت لنگر

موقعیت لنگر در Chrome 125 ارسال شده است. به شما راهی می دهد تا موقعیت یک عنصر را به یک لنگر گره بزنید، برای مثال هنگام باز کردن یک راهنمای ابزار با یک دکمه.

اکنون در Interop 2025 گنجانده شده است، بنابراین باید امسال شاهد پیوستن آن به Baseline باشیم.

Core Web Vitals: LCP و INP

LCP API

API زمان‌بندی رویداد (برای INP)

Web Vitals می تواند به شما در تعیین کمیت تجربه سایت و شناسایی فرصت های بهبود کمک کند. هدف ابتکار Web Vitals ساده‌سازی چشم‌انداز است و به سایت‌ها کمک می‌کند تا بر معیارهایی که بیشترین اهمیت را دارند، یعنی Core Web Vitals تمرکز کنند.

Interop 2025 شامل معیارهای Largest Contentful Paint (LCP) و Interaction to Next Paint (INP) با اجرای LargestContentfulPaint API و Event Timing API در مرورگرها است.

ارتقاء عنصر <details>

خود عنصر <details> از قبل به صورت گسترده در دسترس است. در Interop 2025 گنجانده شده است زیرا تعدادی ویژگی وجود دارد که ویجت های افشا را با <details> مفیدتر می کند.

عنصر <details> حاوی یک عنصر <summary> است که وقتی عنصر <details> جمع می شود در صفحه قابل مشاهده است. خارج از <summary> محتوای عنصر <details> است، تا زمانی که کاربر روی خلاصه کلیک کند پنهان می شود.

یکی از مواردی که در طول Interop 2025 قابل همکاری است، پنهان کردن محتوا با استفاده از content-visibility به جای display است، به این معنی که اگر گسترش نیابد، محتوا به هیچ وجه ارائه نخواهد شد.

همچنین بخشی از کار Interop 2025 شبه عنصر ::marker است. شبه عنصر ::marker به شما امکان می دهد مثلث آشکار عنصر <summary> را استایل دهید.

summary::marker {
  content: "+ ";
  font-family: monospace;
  color: red;
  font-weight: bold;
}

سپس، یک شبه عنصر دیگر— ::details-content .

::details-content محتوا را نشان می‌دهد—بخشی از عنصر جزئیات که گسترش می‌یابد و جمع می‌شود و به شما امکان می‌دهد به آن استایل دهید.

[open]::details-content {
  border: 5px dashed hotpink;
}

همچنین بهبودهای خوبی وجود دارد، مانند گسترش خودکار عنصر <details> با یافتن در صفحه مطابقت، و آوردن مقدار until-found مشخصه hidden HTML به Baseline Newly در دسترس است. این یک عنصر را پنهان می کند تا زمانی که با استفاده از جستجوی جستجو در صفحه مرورگر پیدا شود یا مستقیماً با دنبال کردن یک قطعه URL به آن هدایت شود.

CSS @scope

قانون CSS @scope به شما این امکان را می دهد که دسترسی انتخابگرهای خود را محدود کنید. با تنظیم یک ریشه دامنه با @scope ، هر قانون سبکی که در داخل at-rule تودرتو است فقط برای آن درخت DOM اعمال می شود.

به عنوان مثال، اگر شما فقط می خواهید عناصر <img> را در داخل یک عنصر با کلاس .card هدف قرار دهید، سپس .card به ریشه دامنه تبدیل می شود.

@scope (.card) {
    img {
        border-color: green;
    }
}

در محدود کردن دسترسی انتخابگرهای خود با CSS @scope at-rule بیشتر بیاموزید.

scrollend

یکی دیگر از ویژگی هایی که پیچیدگی را کاهش می دهد و رابط های اسکرول را بهبود می بخشد، scrollend است. بدون رویداد scrollend ، هیچ راه قابل اعتمادی برای تشخیص کامل بودن اسکرول وجود ندارد.

// before scrollend
document.onscroll = event => {
  clearTimeout(window.scrollEndTimer)
  window.scrollEndTimer = setTimeout(callback, 100)
}

با رویداد scrollend ، مرورگر این همه ارزیابی دشوار را برای شما انجام می دهد.

document.onscrollend = event => {…}

نمونه‌های بیشتری را در اسکرولند، یک رویداد جدید جاوا اسکریپت ببینید.

انتقال نمای همان سند

آخرین و البته نه کم اهمیت ترین، انتقال مشاهده بخشی از Interop 2025 است. کار شامل انتقال نمای سند یکسان است، بنابراین آنهایی که برای برنامه های تک صفحه ای و همچنین کلاس های انتقال مشاهده می شوند.

داشبورد Interop 2025 را دنبال کنید تا ببینید که چگونه پروژه با پیشرفت سال شکل می‌گیرد.

ویژگی‌های گنجانده شده در Interop 2025 تنها مواردی نیستند که امسال بخشی از Baseline می‌شوند، اما گنجاندن آنها در پروژه‌ها نشانه‌ای خوب از اولویت‌بندی آنها و به زودی ارائه آن‌ها به ما می‌دهد.

تازه داریم شروع می کنیم

سال هیجان انگیزی برای Baseline بود، و ما از اعلامیه های سال گذشته خود فاصله زیادی گرفته ایم. ما اکنون در موقعیتی هستیم که تکمیل داده های ویژگی های وب کامل شده است. این باعث باز شدن floodgates شده و امکان ایجاد ابزارهای توسعه دهنده را فراهم کرده است. ما واقعاً در اینجا شروع به کار کرده‌ایم، و اگر محصول یا ابزار منبع باز دارید که از گنجاندن این داده‌ها سود می‌برد، خوشحال می‌شویم از شما بشنویم.

مراقب web.dev باشید زیرا به انتشار اطلاعیه‌های مربوط به ابزارهای جدید همراه با آموزش‌ها ادامه می‌دهیم تا به شما کمک کنیم از همه چیزهایی که وب ارائه می‌کند استفاده کنید.